<template>
	<view style="text-align: center;background-color: #efeef9;">
		<view class="avator" style="margin: 0 auto;">
			<image class="img" src="../../static/image/index_bj.jpg" style="min-width: 370px;height:190px;border-radius: 5% 5%;"></image>
		</view>
		<view class="title">
			NatureHaven智慧大棚
		</view>
		<view class="content" style="min-width: 320px;">
			<view class="box">
				<view class="nav" style="background-color: #e2faef;">
					<image src="../../static/image/zdh.png" class="img"></image>
				</view>
				<view class="text">
					<label>自动化</label>
				</view>
			</view>
			<view class="box" @click="Temp">
				<view class="nav">
					<image src="../../static/image/sjfx2.png" class="img"> </image>
				</view>
				<view class="text">
					<label>数据分析</label>
				</view>
			</view>
			<view class="box" @click="toMyInfos">
				<view class="nav" style="background-color: #efeef9;" >
					<image src="../../static/image/sz.png" style="width: 36px;height: 36px;margin-top: 5px;"> </image>
				</view>
				<view class="text">
					<label >设置</label>
				</view>
			</view>
		</view>
		<view class="control" style="min-width: 320px;">
			<view class="control_box">
				<image :src="pump_btn" class="cn_btn"></image>
				<view class="text">
					<!-- <label>水泵<span style="color: red;">{{pump_gear}}</span></label> -->
					<label>水泵
						<span style="margin-left:3px;">
							<select  v-model="pump_selected" class="select_style" ref="pump_select" @click="changePump">
								<option value="0" selected>关闭</option>
								<option value="1">1档</option>
								<option value="2">2档</option>
								<option value="3">3档</option>
							</select>
						</span>
					</label>
				</view>
			</view>
			<view class="control_box">
				<image :src="fan_btn" class="cn_btn"></image>
				<view class="text">
					<!-- <label>风扇<span style="color: red;">{{fan_gear}}</span></label> -->
					<label>风扇
						<span style="margin-left:3px;">
							<select class="select_style" v-model="fan_selected"  ref="fan_select"  @click="changeFan">
								<option value="0">关闭</option>
								<option value="1">1档</option>
								<option value="2">2档</option>
								<option value="3">3档</option>
							</select>
						</span>
					</label>
				</view>
			</view>
			<view class="control_box">
				<image :src="light_btn" class="cn_btn"></image>
				<view class="text">
					<!-- <label>灯光<span style="color: red;">{{light_intensity_gear}}</span></label> -->
					<label>灯光
						<span style="margin-left:3px;">
							<select class="select_style" ref="light_select" v-model="light_selected" @click="changeLight">
								<option value="0">关闭</option>
								<option value="20">20</option>
								<option value="40">40</option>
								<option value="60">60</option>
								<option value="80">80</option>
								<option value="100">100</option>
							</select>
						</span>
					</label>
				</view>
			</view>
		</view>
		<view class="data">
			<view class="data_item" @click="Temp">
				<view class="item_left">
					<label style="line-height: 30px;">环境温度</label>
					<view>
						<span style="color: #40cea6;">{{temperature}}</span>
						<image :src="tem_change_img" class="increase_img"></image>
					</view>
				</view>
				<view class="item_right">
					<image src="../../static/image/wdj.png" style="width: 35px;height: 35px;margin-top: 6px;"></image>
				</view>
			</view>
			<view class="data_item" style="margin-left: 10px;" @click="Air">
				<view class="item_left">
					<label style="line-height: 30px;">环境湿度</label>
					<view>
						<span style="color: #40cea6;">{{humidity}}</span>
						<image :src="hum_change_img" class="increase_img"></image>
					</view>
				</view>
				<view class="item_right">
					<image src="../../static/image/sd.png" style="width: 28px;height: 35px;margin-top: 6px;"></image>
				</view>
			</view>
			<view class="data_item" @click="Dust">
				<view class="item_left">
					<label style="line-height: 30px;">土壤湿度</label>
					<view>
						<span style="color: #40cea6;">{{moisture}}</span>
						<image :src="moisture_change_img" class="increase_img"></image>
					</view>
				</view>
				<view class="item_right">
					<image src="../../static/image/trsd.png" style="width: 28px;height: 35px;margin-top: 6px;"></image>
				</view>
			</view>
			<view class="data_item" style="margin-left: 10px;" @click="Light">
				<view class="item_left">
					<label style="line-height: 30px;">光照强度</label>
					<view>
						<span style="color: #40cea6;font-size: 13px;" >{{intensity}}</span>
						<image :src="intensity_change_img" class="increase_img"></image>
					</view>
				</view>
				<view class="item_right">
					<image src="../../static/image/sun.png" style="width: 35px;height: 35px;margin-top: 6px;"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data() {
			return {
				//改变趋势图标地址
				/* ../../static/image/down.png */
				temperature: '17℃',  //空气温度
				humidity: '56%',   //环境湿度
				moisture: '52%', //土壤湿度
				intensity: '1888Lux', // 光照强度
				pump_btn:'../../static/image/btn_off.png',
				fan_btn:'../../static/image/btn_off.png',
				light_btn:'../../static/image/btn_off.png',
				tem_change_img:'',
				hum_change_img:'',
				moisture_change_img:'',
				intensity_change_img:'',
				pump_selected: '0',
				fan_selected: '0',
				light_selected: '0',
				
			}
		},
		onLoad() {
			this.getInfos();
		},
		onShow() {
			let that = this;
			that.timer = setInterval(() => {
				that.getInfos();
			}, 10000);
		},
		//清除计时器一般页面onUnload(),tabbar用onHide()
		onHide() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
			console.clear();
		},
		methods: {
			//点击跳转至温度详情页
			Temp() {
				uni.navigateTo({
					url: '/pages/message/temp_data/temp_data'
				})
			},
			//点击跳转至大棚湿度详情页
			Air() {
				uni.navigateTo({
					url: '/pages/message/Air_data/Air_data'
				});
			},
			//点击跳转至土壤湿度详情页
			Dust() {
				uni.navigateTo({
					url: '/pages/message/Dust_data/Dust_data'
				});
			},
			//点击跳转至光照强度详情页
			Light() {
				uni.navigateTo({
					url: '/pages/message/Light_data/Light_data'
				});
			},
			toMyInfos(){
				uni.switchTab({
					url: '/pages/my/my'
				});
			},
			getInfos(){
				let that = this;
				
				//保证立刻显现数据
				uni.request({
					url: 'http://192.168.5.3:9091/api/getTempHudRealTime', //正式地址
					method: 'GET',
					success(res) {
						//收温度
						console.log(res.data);
						if (res.data.temp != null) {
							that.temperature = res.data.temp[res.data.temp.length - 1] + "℃";
							console.log("最后的温度" + that.temperature)
							//异常数据检测
							switch (res.data.tempCondition) {
								case 1:
									that.tem_inscrease_img = '';
									break;
								case 0:
									//过低
									that.tem_inscrease_img = '../../static/image/decrease.png';
									break;
								case 2:
									//过高
									that.tem_inscrease_img = '../../static/image/increase.png';
									break;
								default:
									that.temperature = "温度数据异常";
							}
						}
				 
						//空气湿度
						if (res.data.hum != null) {
							that.humidity = res.data.hum[res.data.hum.length - 1] + "%";
							//补充升降判断
				
							//异常数据检测
							switch (res.data.humCondition) {
								case 1:
									that.hum_change_img = '';
									break;
								case 0:
									that.hum_change_img = '../../static/image/decrease.png';
									//过低
									break;
								case 2:
									//过高
									that.hum_change_img = '../../static/image/increase.png';
									break;
								default:
									that.humidity = "湿度数据异常";
							}
						}
				
						//土壤湿度
						if (res.data.moisture != null) {
							that.moisture = res.data.moisture[res.data.moisture.length - 1] + "%";
							//补充升降判断
				
							//异常数据检测
							switch (res.data.moistureCondition) {
								case 1:
									//正常
									that.moisture_change_img = '';
									break;
								case 0:
									//过低
									that.moisture_change_img = '../../static/image/decrease.png';
									break;
								case 2:
									//过高
									that.moisture_change_img = '../../static/image/increase.png';
									break;
								default:
									that.moisture = "土壤湿度异常"; 
							}
						}
				
						//光照强度
						if (res.data.intensity != null) {
							that.intensity = res.data.intensity[res.data.intensity.length - 1];
							that.intensity = that.intensity + "Lux"
							//补充升降判断
				
							//异常数据检测
							switch (res.data.intensityCondition) {
								case 1:
									that.intensity_change_img = '';
									break;
								case 0:
									//过低
									that.intensity_change_img = '../../static/image/decrease.png';
									break;
								case 2:
									//过高
									that.intensity_change_img = '../../static/image/increase.png';
									break;
								default:
									that.intensity = "光照异常"
							}
				
							if (that.intensity > 99999) {
								//科学计数法化
								that.intensity = that.intensity.toExponential(1);
							}
						}
					},
					fail() {
						uni.showToast({
							title: "数据请求失败",
							icon: "error"
						});
					}
				});
				//获取设置状态值
				/* uni.request({
					url: 'http://192.168.5.3:9091/api/getDeviceState',
					method: 'GET',
					success(res) {
						console.log(res.data)
						if (res.data.Pump > 0){
							that.pump_selected = res.data.Pump;
							that.pump_btn = "../../static/image/btn_on.png";
						}else{
							that.pump_selected = "0";
							that.pump_btn = "../../static/image/btn_off.png";
						}
						if (res.data.Fan > 0){
							that.fan_selected = res.data.Fan;
							that.fan_btn = '../../static/image/btn_on.png';
							
						}else{
							that.fan_selected = "0";
							that.fan_btn = '../../static/image/btn_off.png';
						}
							
						if (res.data.Light > 0) {
							that.light_selected = res.data.Light;
							that.light_btn = '../../static/image/btn_on.png';
						} else {
							that.light_selected = '0';
							that.light_btn = '../../static/image/btn_off.png';
						}
					},
					fail() {
						uni.showToast({
							title: "设备状态请求失败",
							icon: "error"
						});
					}
				}); */
			},
			//改变水泵状态
			changePump(){
				const pump_select_value = this.$refs.pump_select.value;
				console.log("水泵的级别：" + pump_select_value);
				let that = this;
				uni.request({
					//发出修改状态请求，如果成功则POST修改状态，否则不变
					// url: 'http://192.168.5.3:9091/api/app/setPump?device=1',   // device=1   为水泵
					url: 'http://192.168.5.3:9091/api/app/setControlLevel?device=1',
					method: 'POST',
					data: {
						state: pump_select_value,
					},
					success(res) {
						if (pump_select_value > 0){
							that.pump_selected = pump_select_value;
							that.pump_btn = "../../static/image/btn_on.png";
						}else{
							that.pump_selected = "0";
							that.pump_btn = "../../static/image/btn_off.png";
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:"error",
						})
					}
				});
			},
			//改变风扇
			changeFan(){
				const fan_select_value = this.$refs.fan_select.value;
				console.log("风扇的级别：" + fan_select_value);
				let that = this;
				
				uni.request({
					//发出修改状态请求，如果成功则POST修改状态，否则不变
					// url: 'http://192.168.5.3:9091/api/app/setPump?device=1',   // device=1   为水泵
					url: 'http://192.168.5.3:9091/api/app/setControlLevel?device=3',
					method: 'POST',
					data: {
						state: fan_select_value,
					},
					success(res) {
						if (fan_select_value > 0){
							that.fan_selected = fan_select_value;
							that.fan_btn = "../../static/image/btn_on.png";
						}else{
							that.fan_selected = "0";
							that.fan_btn = "../../static/image/btn_off.png";
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:"error",
						})
					}
				});
				
			},
			//改变灯光值
			changeLight(){
				const light_select_value = this.$refs.light_select.value;
				console.log("灯光的级别：" + light_select_value);
				let that = this;
				
				uni.request({
					//发出修改状态请求，如果成功则POST修改状态，否则不变
					// url: 'http://192.168.5.3:9091/api/app/setPump?device=1',   // device=2   为灯光
					url: 'http://192.168.5.3:9091/api/app/setControlLevel?device=2',
					method: 'POST',
					data: {
						state: light_select_value,
					},
					success(res) {
						if (light_select_value > 0){
							that.light_selected = light_select_value;
							that.light_btn = "../../static/image/btn_on.png";
						}else{
							that.light_selected = "0";
							that.light_btn = "../../static/image/btn_off.png";
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:"error",
						})
					}
				});
			}
		}
	}
</script>

<style>
	.content{
		border-bottom: 1px solid #ABEAE2FF;
		margin: 0px 20px;
		padding:25px 10px 20px;
		height: 90px;
		background-color: #FFFFFF;
	}
	.box{
		width: 33.3%;text-align: center;float: left;
	}
	.title{
		padding-left: 10px;
		width: 88%;
		text-align: left;
		margin:10px 20px 0px;
		background-color: #FFFFFF;
		line-height: 40px;
	}
	.nav{
		margin: 0 auto;
		width: 50px;height: 50px;background-color:#e2f4f7;border-radius: 10px;
	}
	.nav .img{
		width: 40px;
		height: 40px;
		margin-top: 3px;
		margin-bottom: 5px;
	}
	.text{
		margin-top: 10px;
		font-size: 13px;
		color:808080;
	}
	.control{
		margin: 0px 20px;
		height: 60px;
		background-color: #FFFFFF;
		padding:25px 10px 20px;
	}
	.control_box{
		width: 33%;
		text-align: center;
		float: left;
	}
	.cn_btn{
		width: 50px;
		height: 30px;
	}
	.select_style{
		color: #40cea6;height:27px;line-height: 27px;border: none;
	}
	.data{
		margin: 0px 20px;
		padding:0px 0px 20px;
		margin-top: 20px;
		height: 180px;
	}
	.data_item{
		width: 43%;
		padding: 10px;
		height: 60px;
		float: left;
		border-radius: 10px;
		margin-bottom: 10px;
		background-color: #FFFFFF;
	}
	.item_left{
		width: 50%;
		height: 60px;
		float:left;
		text-align: left;
		padding-left: 10px;
	}
	.item_right{
		width: 50px;
		height: 50px;
		float: left;
		margin-left: 4%; 
		border-radius: 50%;
		background-color: #efeef9;;
		margin-top: 18px;
	}
	.increase_img{
		width: 10px;height: 15px;margin-left: 5px;
	}
</style>